<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        书名：<label>西游记</label>===单价：<label>{{xyjdj}}</label>====<input type="number" v-model="xyjsl">===金额：<label>{{xyjje}}</label><br>
        书名：<label>水浒传</label>===单价：<label>{{shzdj}}</label>====<input type="number" v-model="shzsl">===金额：<label>{{shzje}}</label><br>
        总价：{{totalPrice}} <br>
        {{message}}
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                xyjdj: 30,
                xyjsl: 1,
                shzdj: 30,
                shzsl: 1,
                message: ""
            },
            computed: {
                xyjje(){
                    return this.xyjdj * this.xyjsl;
                },
                shzje() {
                    return this.shzdj * this.shzsl;
                },
                totalPrice() {
                    return this.xyjje+this.shzje;
                }
            },
            watch: {
                xyjsl(newValue, oldValue) {
                    if (newValue >= 3) {
                        this.message = "库存不足"
                        this.xyjsl=3
                    } else {
                        this.message = ""
                    }
                }
            },
        })
    </script>
</body>
</html>